<template>
  <div>
    <div>
      <div class="subject">
        <span>{{(this.content.index+1).toString()}}.&nbsp;</span>
        <span class="subject-text">{{this.content.text}}</span>
        <span
          class="badge badge-pill"
          :class="{'badge-primary':(left>0),'badge-secondary':(left==0)}"
        >剩余&nbsp;{{left}}</span>
      </div>
      <div class="list-group">
        <Option
          v-for="item in content.options"
          :key="item.id"
          :content="item"
          :left="left"
          @setValue="setValue($event)"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Option from "@/components/views/MainViewComponents/Option.vue";
export default {
  name: "Subject",
  props: ["content"],
  data() {
    return {
      score: [],
      left: 10
    };
  },
  methods: {
    setValue(data) {
      this.left = 10;
      for (let i = 0; i < this.score.length; i++) {
        if (this.score[i].type == data.type) {
          this.score[i].value = data.value;
        }
        this.left = this.left - this.score[i].value;
      }
      if (this.left == 0) {
        this.$emit("setValue", {
          index: this.content.index,
          value: this.score
        });
      } else {
        this.$emit("setValue", { index: this.content.index, value: null });
      }
    },
    initValue() {
      this.score = [];
      for (let i = 0; i < this.$store.state.baseData[0].options.length; i++) {
        this.score.push({
          type: this.$store.state.baseData[0].options[i].type,
          value: 0
        });
      }
      //window.console.log(this.$store.state.baseData[0]);
    }
  },
  components: {
    Option
  },
  mounted() {
    this.initValue();
    //window.console.log(this.score);
    //window.console.log(this.left);
  }
};
</script>

<style scoped>
.subject-text {
  font-size: 1em;
  font-weight: bold;
}
.subject {
  text-align: justify;
  padding: 1.5em 0.25em 0.5em 0.25em;
}
</style>